<template>
  <van-nav-bar title="以爱之名-大事记" left-text="返回" left-arrow @click-left="$router.back" />
  <van-steps direction="vertical" :active="list.length" @click-step="clickStep">
    <van-step v-for="item in list" :key="item.name">
      <h3>{{ item.name }}</h3>
      <p>{{ item.time }}</p>
      <p>{{ item.description }}</p>
    </van-step>
    <van-step>
      <h3>待续……</h3>
    </van-step>
  </van-steps>
</template>
<script setup>
import { ref } from 'vue'

let list = ref([
  {
    name: '在一起',
    time: '2017-07-07'
  },
  {
    name: '买房',
    time: '2022-11-19'
  },
  {
    name: '求婚',
    time: '2023-05-20',
    description: '龙臭臭穿着裤衩子接受的求婚'
  },
  {
    name: '订婚',
    time: '2025-02-02',
    url: 'https://v.douyin.com/ifoDo3CN/'
  }
])

const clickStep = (index) => {
  if (list.value[index].url) window.open(list.value[index].url)
}
</script>
